<template>
	<view class="pageBox">
		<!--我的粉丝-->
		
		<view class="headerBox">
			<view class="headerContent">
				<view class="headerNavbar">
					<text class="wlIcon-fanhui1 text-white" @tap="$wanlshop.back(1)"></text>
					<view class="headerTitle">我的粉丝</view>
				</view>
				
				<view class="numBox">
					<view class="num-item">
						<view class="value">{{total_zt_num||0}}</view>
						<view class="title">我的直推粉丝(人)</view>
					</view>
					
					<view class="line"></view>
					
					<view class="num-item" @tap="$wanlshop.to('/pages/new/teampv')">
						<view class="value">{{total_pv||0}}</view>
						<view class="title">团队累计pv</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="title-box">
			<image src='/static/images/user-red.png' class="user-image"></image>
			<view class="record-title">粉丝列表</view>
		</view>
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				<image :src="item.avatar" class="avatar"></image>
				
				<view class="info-box">
					<view class="flex align-center">
						<view class="nickname">{{item.nickname || ''}}</view>
						<view class="lable"  v-if="item.group_name">{{item.group_name || ''}}</view>
						<view class="lable margin-left-sm" v-if="item.store_name">{{item.store_name || ''}}</view>
						<view class="lable margin-left-sm" v-if="item.yx_name">{{item.yx_name || ''}}</view>
					</view>
					<view class="phone">{{item.mobile|| ''}}</view>
				</view>
				
				<image src="/static/images/phone.png" class="phone-image" @click="callPhone(item.mobile)"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			total_zt_num:0, //粉丝数
			total_pv:0, //团队累积PV
			
			dataList:[
				// {
				// 	nickname:'昵称',
				// 	group_name: 'xxxx',
				// 	store_name:'1111',
				// 	mobile:'13284845555',
				// 	avatar:'/static/images/default/screen_icon_new.png',
				// }
			],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'noMore',//noMore loading
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		this.getList();
	},
	onShow(){
		
	},
	methods: {
		goBack(){
			uni.navigateBack({
				delta:1
			})
		},
		callPhone(phone){
			uni.makePhoneCall({
			    phoneNumber: phone
			});
		},
		getList(){
			let that = this;
			this.status = 'loading';
			uni.request({
				url: '/user/myteam',
				data: {
					page: this.current_page,
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						that.total_pv = res.data.pv;
						that.total_zt_num = res.data.zt_num;
						
						that.dataList = [...that.dataList, ...res.data.list];
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						that.status = 'more';
					}
				}
			});
			
		},
	}
}
</script>


<style>
page{
	background-color:  #ffffff !important;	
}
</style>


<style scoped lang="scss">
	
.headerBox{
	
	.headerContent{
		width: 750rpx;
		height: 412rpx;
		background: #9C3928;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top:115rpx;
	}
	
	.headerNavbar{
		display: flex;
		padding-left: 33rpx;
	}
	
	.headerTitle{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		padding-left: 246rpx;
	}
	
	.headerBody{
		width: 702rpx;
		height: 336rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 48rpx;
		margin-left: 24rpx;
		display: flex;
		justify-content: flex-start;
		padding: 31rpx 32rpx;
		flex-direction: column;
	}
	
	.numBox{
		margin-top: 58rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		justify-content: space-between;
		padding: 0rpx 80rpx;
	}
	
	.num-item{
		display: flex;
		flex-direction: column;
	}
	
	.value{
		font-size: 64rpx;
		font-family: Roboto-Medium, Roboto;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 75rpx;
	}
	
	.title{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 33rpx;
		margin-top: 12rpx;
	}
	
	.line{
		width: 1rpx;
		height: 110rpx;
		background-color: rgba(255,255,255,0.41);
	}
}	

.title-box{
	display: flex;
	margin-top: 34rpx;
	margin-left: 32rpx;
	
	.user-image{
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}
	
	.record-title{
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #9C3928;
		line-height: 42rpx;
	}
}	

.list{
	margin-top: 24rpx;
	
	.list-item{
		padding: 18rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.avatar{
		width: 84rpx;
		height: 84rpx;
		opacity: 1;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.info-box{
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	
	.nickname{
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 44rpx;
		margin-right: 22rpx;
	}
	
	.lable{
		font-size: 18rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 21rpx;
		background: #FCBB3A;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		padding: 6rpx 16rpx;
	}
	
	.phone{
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #707070;
		line-height: 44rpx;
		margin-top: 0rpx;
	}
	
	.phone-image{
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
	}
}

</style>